<template>
  <!-- 注册表单 -->
  <div class="registerFormContainer">
    <el-form
      ref="registerForm"
      :model="registerForm"
      label-width="80px"
      :rules="registerRules"
    >
      <el-row>
        <el-col>
          <el-form-item label="昵称" prop="nickName">
            <el-input v-model="registerForm.nickName" clearable></el-input>
          </el-form-item>      
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="registerForm.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
              <el-radio label="保密"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="registerForm.phoneNumber" clearable></el-input>
          </el-form-item>    
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="registerForm.password"
              clearable
              show-password
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
 
      <el-row>
        <el-col>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              clearable
              show-password
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row >
        <el-col >
          <el-form-item>
            <el-button type="primary" @click="submitForm('registerForm')"
              >立即注册</el-button
            >
            <el-button @click="resetForm('registerForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    //对用户输入进行校验
    var validatePhoneNumber = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入手机号"));
      } else if (
        /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test(value)
      ) {
        callback();
      } else {
        callback(new Error("请正确填写您的手机号码"));
      }
    };
    var validatePassword = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入密码"));
      } else if (/^.*(?=.{8,})(?=.*\d)(?=.*[a-zA-Z]).*$/.test(value)) {
        callback();
      } else {
        callback(new Error("密码强度过低,至少8位,需包含数字与字母"));
      }
    };
    var validateConfirmPassword = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入确认密码"));
      } else if (value != this.registerForm.password) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        nickName: "",
        gender: "",
        phoneNumber: "",
        password: "",
        confirmPassword: "",
      },
      registerRules: {
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        phoneNumber: [
          { required: true, validator: validatePhoneNumber, trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePassword, trigger: "blur" },
        ],
        confirmPassword: [
          {
            required: true,
            validator: validateConfirmPassword,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let registerInfo = this.registerForm;
          delete registerInfo.confirmPassword;

          try {
              await this.$store.dispatch("register", registerInfo)
              this.$router.replace({
                name: "registerAndLogin",
                params: {
                  operation: "login",
                },
              });
              this.resetForm('registerForm')
          } catch (error) {
              alert(error)
          }

        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="less">
.registerFormContainer {
  display: flex;
  justify-content: center;
}
</style>